﻿
@{
    ViewBag.Title = "Map";
    Layout = "~/Views/Shared/_MyLayout.cshtml";
}
@section head{
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=kSoIGIUPtwLnFbxKLyZfxKYa77SQpoXO"></script>
}

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>地图显示</legend>
</fieldset>
<form class="layui-form" enctype="multipart/form-data">
    <div class="layui-form-item">
        <label class="layui-form-label">搜索</label>
        <div class="layui-input-block">
            <input type="text" id="SearchText" name="Title1" required lay-verify="required" onkeypress="getKey()" placeholder="输入设备名称" class="layui-input" style="width:300px;float:left;">
            <input type="text" value="" style="display:none" />
            <button type="button" class="layui-btn layui-btn-normal" style="float:left;" onclick="SearchFunc()"><i class="layui-icon">&#xe615;</i></button>


            @*<button type="button" class="layui-btn layui-btn-normal" onclick="apply()"><i class="layui-icon">&#xe63b;</i></button>*@
        </div>
    </div>
</form>
<div style="width:100%;height:550px;position:relative">
    <div style="width:100%;height:550px;position:relative" id="mapDetail">
    </div>
    <img style="position:absolute;left:0;bottom:0;width:100px;height:140px;" src="~/Content/Img/icon_lb.png" />
</div>
<div style="font-size:12px;margin-top:5px;margin-bottom:10px;margin-left:15px;width:100%;">
    ©2020 德器(重庆)科技有限公司|DEQI(CQ) TECHNOLOGY.CO.,LTD 服务热线 400-9019-505
    @*重庆环元环境科学研究院*@
</div>

<script type="text/javascript">

    var now = new Date();
    var map;
    now.setHours(now.getHours() - 1);
    var DeviceListJson = JSON.parse('@Html.Raw(ViewBag.DeviceDataJson)');
    var DeviceListArray = [];

    window.onload = function () {

        initMap();
    }

    function SearchFunc() {
        var SearchText = $("#SearchText").val();
            
        $.ajax({
            type: "POST",
            url: "/Panel/SearchDeviceByName",
            async: false,
            data: { "Name": SearchText },
            success: function (msg) {
                DeviceListJson = msg;
                initMap();


            }
        });

    }


    var opts1 = {
        width: 220,     // 信息窗口宽度
        height: 120,     // 信息窗口高度
        title: "设备信息", // 信息窗口标题
        enableMessage: true//设置允许信息窗发送短息
    };
    var opts2 = {
        width: 220,     // 信息窗口宽度
        height: 220,     // 信息窗口高度
        title: "设备信息", // 信息窗口标题
        enableMessage: true//设置允许信息窗发送短息
    };

    function initMap() {
        // 百度地图API功能
        map = new BMap.Map("mapDetail");
        var IconGray = new BMap.Icon("/Content/Img/icon_1.png", new BMap.Size(32, 32)); //第二个参数为图标大小
        var IconGreen = new BMap.Icon("/Content/Img/icon_2.png", new BMap.Size(32, 32));
        var IconRed = new BMap.Icon("/Content/Img/icon_3.png", new BMap.Size(32, 32));


        var point = new BMap.Point(106.302201, 29.403473);
        map.centerAndZoom(point, 11);
        map.enableScrollWheelZoom();
        map.setMapStyleV2({
            styleId: '116436b35bdb4c1508eea8a5552d0ae2'
        });



        for (var i = 0; i < DeviceListJson.length; i++) {
            DeviceListArray.push(DeviceListJson[i].DeviceId);
            //这里需要查找其他相似的数组
            for (var j = i + 1; j < DeviceListJson.length; j++) {
                if (DeviceListJson[j].lon == DeviceListJson[i].lon && DeviceListJson[j].lat == DeviceListJson[i].lat) {
                    //表明找到相等的,把这个弄进来
                    DeviceListArray.push(DeviceListJson[j].DeviceId);
                    //然后需要在原数组内删除掉弄进来的这个元素
                    DeviceListJson.splice(j, 1);
                }
            }

            point = new BMap.Point(DeviceListJson[i].lon, DeviceListJson[i].lat);
            var marker;
            var LastTime = new Date(Date.parse(DeviceListJson[i].LastTime))
            if (LastTime > now) {
                marker = new BMap.Marker(point, { icon: IconGreen });
            }
            else {
                marker = new BMap.Marker(point, { icon: IconGray });
            }

            var InfoContent = "<p>设备名称：" + DeviceListJson[i].Name + "</p>";
            InfoContent += "<p>地址：" + DeviceListJson[i].Address + "</p>";
            if (DeviceListJson[i].ChannelNum == 1) {
                InfoContent += "<p>油烟浓度：" + DeviceListJson[i].Y1 + "</p>";
                InfoContent += "<p>非甲烷总烃：" + DeviceListJson[i].V1 + "</p>";
                InfoContent += "<p>颗粒物：" + DeviceListJson[i].K1 + "</p>";
            }
            else {
                InfoContent += "通道1：";
                InfoContent += "<p>油烟浓度：" + DeviceListJson[i].Y1 + "</p>";
                InfoContent += "<p>非甲烷总烃：" + DeviceListJson[i].V1 + "</p>";
                InfoContent += "<p>颗粒物：" + DeviceListJson[i].K1 + "</p>";
                InfoContent += "通道2：";
                InfoContent += "<p>油烟浓度：" + DeviceListJson[i].Y2 + "</p>";
                InfoContent += "<p>非甲烷总烃：" + DeviceListJson[i].V2 + "</p>";
                InfoContent += "<p>颗粒物：" + DeviceListJson[i].K2 + "</p>";
            }
                                  
            map.addOverlay(marker);              // 将标注添加到地图中
            addClickHandler(InfoContent, DeviceListJson[i].ChannelNum, marker); 
            DeviceListArray = [];
        }


    }

    function addClickHandler(InfoContent, ChannelNum, marker) {
        marker.addEventListener("click", function (e) {
            openInfo(InfoContent, ChannelNum,e)
        });
    }

    function openInfo(InfoContent, ChannelNum, e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow;
        if (ChannelNum == 1) {
            infoWindow = new BMap.InfoWindow(InfoContent, opts1);
        }
        else {
            infoWindow = new BMap.InfoWindow(InfoContent, opts2);

        }
        map.openInfoWindow(infoWindow, point);
         
    }



</script>

